<!DOCTYPE html>
<html lang="ZH-cn">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Test</title>
  <link rel="stylesheet" href="./styles/default.css">
</head>

<body>
  <s-page>
    <div style="display: flex;height: 1080px;">
      <s-navigation mode="rail" onchange="console.log(this.selectedIndex)">
        <s-icon-button slot="start" type="filled-tonal">
          <s-icon type="menu"></s-icon>
        </s-icon-button>

        <s-navigation-item selected="true">
          <s-icon slot="icon">
            <svg viewBox="0 -960 960 960">
              <path
                d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z" />
            </svg>
          </s-icon>
          <div slot="text">首页</div>
        </s-navigation-item>
        <s-navigation-item>
          <s-icon slot="icon">
            <svg viewBox="0 -960 960 960">
              <path
                d="M120-520v-320h320v320H120Zm0 400v-320h320v320H120Zm400-400v-320h320v320H520Zm0 400v-320h320v320H520ZM200-600h160v-160H200v160Zm400 0h160v-160H600v160Zm0 400h160v-160H600v160Zm-400 0h160v-160H200v160Zm400-400Zm0 240Zm-240 0Zm0-240Z" />
            </svg>
          </s-icon>
          <div slot="text">组件</div>
          <s-badge slot="badge">16</s-badge>
        </s-navigation-item>
        <s-navigation-item>
          <s-icon slot="icon">
            <svg viewBox="0 -960 960 960">
              <path
                d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 32.5-156t88-127Q256-817 330-848.5T488-880q80 0 151 27.5t124.5 76q53.5 48.5 85 115T880-518q0 115-70 176.5T640-280h-74q-9 0-12.5 5t-3.5 11q0 12 15 34.5t15 51.5q0 50-27.5 74T480-80Zm0-400Zm-220 40q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm120-160q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm200 0q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm120 160q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17ZM480-160q9 0 14.5-5t5.5-13q0-14-15-33t-15-57q0-42 29-67t71-25h70q66 0 113-38.5T800-518q0-121-92.5-201.5T488-800q-136 0-232 93t-96 227q0 133 93.5 226.5T480-160Z" />
            </svg>
          </s-icon>
          <div slot="text">样式</div>
        </s-navigation-item>
        <s-navigation-item>
          <s-icon slot="icon">
            <svg viewBox="0 -960 960 960">
              <path
                d="M480-240Zm-320 80v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q37 0 73 4.5t72 14.5l-67 68q-20-3-39-5t-39-2q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32h240v80H160Zm400 40v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q8 9 12.5 20t4.5 22q0 11-4 22.5T903-340L683-120H560Zm300-263-37-37 37 37ZM620-180h38l121-122-18-19-19-18-122 121v38Zm141-141-19-18 37 37-18-19ZM480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm0-80q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Z" />
            </svg>
          </s-icon>
          <div slot="text">设计</div>
          <s-badge slot="badge"></s-badge>
        </s-navigation-item>
        <s-navigation-item>
          <s-icon slot="icon">
            <svg viewBox="0 -960 960 960">
              <path
                d="M480-503Zm-40-366q19-11 40-11t40 11l280 161q19 11 29.5 29t10.5 40v170q-18-13-38-22.5T760-508v-88l-144 83q-56 14-101.5 47.5T440-384v-73L200-596v274l202 117q4 32 15 61.5T445-88q-2-1-2.5-1.5T440-91L160-252q-19-11-29.5-29T120-321v-318q0-22 10.5-40t29.5-29l280-161Zm40 69L243-663l237 137 237-137-237-137Zm200 680 120-120-28-28-72 72v-164h-40v164l-72-72-28 28 120 120Zm0 80q-83 0-141.5-58.5T480-240q0-83 58.5-141.5T680-440q83 0 141.5 58.5T880-240q0 83-58.5 141.5T680-40Z" />
            </svg>
          </s-icon>
          <div slot="text">资源</div>
        </s-navigation-item>
        <div slot="end" style="display: flex;align-items: flex-end;justify-content: center;">
          <s-icon-button slot="menu" type="outlined" style="margin: 16px 0;">
            <s-icon type="dark_mode"></s-icon>
          </s-icon-button>
        </div>
      </s-navigation>
    </div>

    <s-navigation onchange="console.log(this.selectedIndex)">
      <s-navigation-item selected="true">
        <s-icon slot="icon" type="add"></s-icon>
        <div slot="text">Home</div>
      </s-navigation-item>
      <s-navigation-item badge="99">
        <s-icon type="add" slot="icon"></s-icon>
        <div slot="text">Chat</div>
      </s-navigation-item>
      <s-navigation-item>
        <s-icon type="dark_mode" slot="icon"></s-icon>
        <div slot="text">Dark</div>
      </s-navigation-item>
      <s-navigation-item badge="5">
        <s-icon type="light_mode" slot="icon"></s-icon>
        <div slot="text">Light</div>
      </s-navigation-item>
    </s-navigation>
  </s-page>
  <script type="module" src="../dist/main.js"></script>
  <script type="module" src="./scripts/default.js"></script>
</body>

</html>